<%--
  Created by IntelliJ IDEA.
  User: SYG
  Date: 2017/12/21
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Html的Form表单元素</title>
</head>
<body>

<fieldset style="width: 500px">

    <legend>Form表单的元素</legend>
    <!--form表单的action属性规定当提交表单时，向何处发送表单数据，method属性指明表单的提交方式，分为get和post，默认为get-->
    <form action="${pageContext.request.contextPath}/reqParam" method="post">

        <!--输入文本框，SIZE表示输入框的显示长度，maxlength表示最多输入长度-->
        编&nbsp;&nbsp;&nbsp;号(文本框)：<input type="text" name="userid" value="NO." size="20" maxlength="5"><br>

        <!--输入文本框，通过value指定其显示的默认值(建议使用placeholder="",后台不会获取placeholder属性的值)-->
        用户名(文本框)：<input type="text" name="username" placeholder="请输入用户名"><br>

        <!--密码框，其中所有输入的内容都以密文的形式显示-->
        密&nbsp;&nbsp;&nbsp;码(密码框)：<input type="password" name="userpass" placeholder="请输入密码"><br>

        <!--单选按钮，通过checked指定默认选中，名称必须一样，其中value为真正需要的内容-->
        性&nbsp;&nbsp;&nbsp;别(单选框)：
        <lable><input type="radio" name="sex" value="男" checked="checked"/>男</lable>
        <lable><input type="radio" name="sex" value="女"/>女</lable><br/>

        <!--下拉列表框，通过<option>元素指定下拉的选项-->
        部&nbsp;&nbsp;&nbsp;门(下拉框)：
        <select name="dept">
            <option value="技术部">技术部</option>
            <option value="销售部" SELECTED>销售部</option>
            <option value="财务部">财务部</option>
        </select><br>

        <!--复选框，可以同时选择多个选项，名称必须一样，其中value为真正需要的内容-->
        兴&nbsp;&nbsp;&nbsp;趣(复选框)：
        <input type="checkbox" name="inst" value="唱歌">唱歌
        <input type="checkbox" name="inst" value="游泳">游泳
        <input type="checkbox" name="inst" value="跳舞">跳舞
        <input type="checkbox" name="inst" value="编程" checked>编程
        <input type="checkbox" name="inst" value="上网">上网
        <br>

        <!--大文本输入框，宽度为34列，高度为5行-->
        说&nbsp;&nbsp;&nbsp;明(文本域)：<textarea name="note" cols="34" rows="5"></textarea><br/>

        <!--隐藏域，在页面上无法看到，专门用来传递参数或者保存参数-->
        <input type="hidden" name="hiddenField" value="hiddenvalue"/>

        <!--提交表单按钮，当点击提交后，所有填写的表单内容都会被传输到服务器端-->
        <input type="submit" value="提交(提交按钮)">

        <!--重置表单按钮，当点击重置后，所有表单恢复原始显示内容-->
        <input type="reset" value="重置(重置按钮)">
    </form>
</fieldset>
</body>
</html>
